<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>手动构建FeatureLayer</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.16/"></script>
    <script>
        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/widgets/Expand",
            "esri/geometry/Extent",
            "esri/request",
            "esri/layers/FeatureLayer",
            "esri/layers/support/Field",
            "esri/views/draw/Draw",
            "esri/Graphic"
        ], function(
            esriConfig,
            Map,
            MapView,
            Expand,
            Extent,
            request,
            FeatureLayer,
            Field,
            Draw,
            Graphic
        ) {
            var portalUrl = "https://www.arcgis.com";
            var map = new Map({
                basemap: "dark-gray"
            });

            var view = new MapView({
                map: map,
                container: "viewDiv",
                popup: {
                    defaultPopupTemplateEnabled: true
                }
            });

            // 缩放视角到此范围
            var extent = new Extent({
                spatialReference: { latestWkid: 3857, wkid: 102100 },
                xmax: 12969378.614158977,
                xmin: 12944001.520768333,
                ymax: 4865114.227141439,
                ymin: 4841418.748373066
            });
            view.goTo(extent);

            // 构建FeatureLayer
            //spatial 空间的
            var points = [
                { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12948813.101750404, "y": 4856154.103975072, "type": "point" },
                { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12956991.863776907, "y": 4856765.6002013525, "type": "point" },
                { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12963336.137124568, "y": 4856689.163173067, "type": "point" },
                { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12963794.759294279, "y": 4852332.252560818, "type": "point" },
                { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12962189.581700291, "y": 4847210.971665719, "type": "point" },
                { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12954393.004815213, "y": 4847822.467891999, "type": "point" },
                { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12950036.094202965, "y": 4851185.697136542, "type": "point" },
                { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12944838.37627958, "y": 4849656.95657084, "type": "point" },
                { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12945449.87250586, "y": 4856306.978031642, "type": "point" },
                { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12949653.90906154, "y": 4858217.903738769, "type": "point" },
                { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12951182.64962724, "y": 4854013.867183089, "type": "point" },
                { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12953475.760475794, "y": 4855848.355861931, "type": "point" },
                { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12953322.886419224, "y": 4852332.252560818, "type": "point" },
                { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12957603.360003186, "y": 4853249.496900239, "type": "point" },
                { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12956074.619437486, "y": 4858294.340767054, "type": "point" },
                { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12954163.693730358, "y": 4856765.6002013525, "type": "point" },
                { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12950724.027457532, "y": 4856306.978031642, "type": "point" }
            ];

            var symbol = {
                type: "simple-marker", //样式类型为简单标注
                style: "square",
                color: "blue",
                size: "8px",
                outline: {
                    color: [255, 255, 0],
                    width: 3 // points
                }
            };
            var graphics = points.map(function(point, index) {
                return new Graphic({
                    geometry: point,
                    symbol: symbol,
                    attributes: {
                        ObjectID: index,
                        type: "景点",
                        name: "旅游景点" + index,
                        title:"hekk"
                    }
                });
        });
            var fields = [{
                name: "ObjectID",
                alias: "ObjectID",
                type: "oid"
            },
                {
                    name: "type",
                    alias: "Type",
                    type: "string"
                },
                {
                    name: "name",
                    alias: "Name",
                    type: "string"
                }
            ];

            var layer = new FeatureLayer({
                fields: fields,
                objectIdField: "ObjectID",
                geometryType: "point",
                spatialReference: { wkid: 3857 },
                source: graphics,
                popupEnabled:true
            });
            map.add(layer);

        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
</body>

</html>
